<template>
	<div class="j-descriptions">
		<el-descriptions :title="title" :border="border" :column="column" :direction="direction">
			<template #extra>
				<slot name="extra"></slot>
			</template>
			<template #title v-if="title">
				<div class="title-left-tip">
					<h2>{{ title }}</h2>
				</div>
			</template>
			<el-descriptions-item
				v-for="(item, index) in desItem"
				:key="item.key"
				:label="item.label"
				:align="item.align"
				:label-align="item.labelAlign"
				:class-name="item.className"
				:width="item.width"
				:span="item.span"
			>
				<template #label v-if="item.labelSlot">
					<slot :name="item.labelKey" :item="item"></slot>
				</template>
				<slot :name="item.key" :item="item" :index="index">
					<span>{{ getValue(item) }}</span>
				</slot>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script setup lang="ts">
import { DesItem } from '@/components/Descriptions/index';
import { useFilterHandle } from '@/hooks';
const { filterDic } = useFilterHandle();
interface Descriptions {
	border?: boolean; // 是否带有边框 默认false
	column?: number; // 一行 Descriptions Item 的数量 默认3
	direction?: string; // 排列的方向 ertical / horizontal 默认 horizontal
	size?: number; // 列表的尺寸 默认default
	title?: string; //标题文本，显示在左上方
	desItem: DesItem[];
}
withDefaults(defineProps<Descriptions>(), {});
// 转换值
const getValue = (item: any) => {
	if (item.value) {
		if (item.dicKey) {
			return filterDic(item.dicKey, item.value);
		} else {
			return item.value;
		}
	} else {
		return '--';
	}
};
</script>

<style scoped lang="scss">
.j-descriptions {
	margin-bottom: 10px;
	:deep(.el-descriptions__header) {
		align-items: flex-start;
		margin-bottom: 10px;
	}
	:deep(.el-descriptions__content:not(.is-bordered-labe)) {
		color: #303133;
	}
	:deep(.el-descriptions__cell) {
		min-width: 100px;
	}
}
</style>
